<!-- 商品详情页面 -->
<template>
  <!-- 顶部导航栏 -->
  <van-nav-bar left-arrow fixed @click-left="onClickLift" />

  <!-- 顶部标签页导航 -->
  <van-tabs scrollspy sticky>
    <!-- 一、商品 -->
    <van-tab title="商品">
      <!-- 1. 轮播图区域 -->
      <van-swipe
        :autoplay="3000"
        width="375"
        height="375"
        indicator-color="#000"
      >
        <van-swipe-item
          v-for="(item, index) in sliderImage"
          :key="index"
        >
          <van-image width="375" height="375" :src="item" />
        </van-swipe-item>
      </van-swipe>

      <!-- 2. 商品信息区域 -->
      <van-cell-group class="product_info" :border="false">
        <!-- 头部信息 -->
        <van-cell :border="false" class="header_info">
          <!-- 商品价格 -->
          <div class="price">
            <span>￥{{ storeInfo?.price }}</span>
            <van-icon name="share-o" size="20" />
          </div>

          <!-- 商品名 -->
          <div class="title">
            {{ storeInfo?.store_name }}
          </div>
        </van-cell>

        <!-- 其他信息 -->
        <van-cell :border="false" class="other_info">
          <div class="message">
            <span>原价：￥{{ storeInfo?.ot_price }}</span>
            <span>库存：{{ storeInfo?.stock + storeInfo?.unit_name }}</span>
            <span>销量：{{ storeInfo?. fsales }}</span>
          </div>
        </van-cell>
      </van-cell-group>

      <!-- 3. 商品规格选择区域 -->
      <van-cell
        class="sku_window"
        is-link
        @click="showPopup"
      >
        <template #title>
          <span>已选择：{{ sku }}</span>
        </template>
      </van-cell>

      <!-- 4. 商品规格弹出层 -->
      <van-popup
        v-model:show="specState.show"
        closeable
        close-icon="close"
        round
        position="bottom"
      >
        <!-- 弹出层中内容区域 -->
        <van-cell-group :border="false">
          <!-- 头部商品信息 -->
          <van-cell class="popuo-header" :border="false">
            <!-- 商品图片 -->
            <img :src="specDetail?.image">
            <!-- 商品信息 -->
            <div class="info">
              <!-- 商品标题 -->
              <h3>{{ storeInfo?.store_name }}</h3>
              <!-- 商品价格 -->
              <p class="price">
                ￥{{ specDetail?.price }}
              </p>
              <!-- 商品库存 -->
              <p class="stock">
                库存：{{ specDetail?.stock + storeInfo?.unit_name }}
              </p>
            </div>
          </van-cell>

          <!-- 中部商品规格 -->
          <van-cell
            class="spec"
            :border="false"
            v-for="(item, index) in productAttr"
            :key="item.id"
          >
            <!-- 规格标题 -->
            <p>{{ item.attr_name }}</p>
            <!-- 规格数据 -->
            <span
              class="tag"
              v-for="value in item.attr_values"
              :key="value"
              :class="{ active: specState.spec[index] === value }"
              @click="handleTagChange(value, index)"
            >
              {{ value }}
            </span>
          </van-cell>

          <!-- 底部商品数量 -->
          <van-cell class="count" :border="false" title="数量">
            <!-- 计数器 -->
            <van-stepper v-model="specState.count" min="0" :max="specDetail?.stock" />
          </van-cell>
        </van-cell-group>
      </van-popup>
    </van-tab>

    <!-- 二、评论 -->
    <van-tab title="评论">
      <van-cell-group :border="false">
        <!-- 总体评论情况 -->
        <van-cell
          :title="replyInfo"
          :value="replyRate"
          is-link
          :border="false"
          :to="{
            name: 'comment',
            params: {
              productId: storeInfo?.id
            }
          }"
        />

        <!-- 评论列表 -->
        <comment-item
          v-if="replyCount"
          :reply="reply"
        />
      </van-cell-group>
    </van-tab>

    <!-- 三、详情 -->
    <van-tab title="详情">
      <van-cell>
        <div
          class="description"
          v-html="storeInfo?.description"
        />
      </van-cell>
    </van-tab>

    <!-- 四、推荐 -->
    <van-tab title="推荐">
      <!-- 整体区域 -->
      <van-cell>
        <!-- 标题 -->
        <h2>
          推荐商品
        </h2>

        <!-- 推荐商品 -->
        <van-grid clickable :column-num="3" :border="false">
          <van-grid-item
            v-for="item in goodList"
            :key="item.id"
            :to="{
              name: 'product',
              params: {
                productId: item.id
              }
            }"
          >
            <!-- 推荐商品图片 -->
            <van-image width="107" height="107" :src="item.image" />
            <!-- 推荐商品标题 -->
            <p>{{ item.store_name }}</p>
            <!-- 推荐商品价格 -->
            <span>￥{{ item.price }}</span>
          </van-grid-item>
        </van-grid>
      </van-cell>
    </van-tab>
  </van-tabs>

  <!-- 底部购物区域 -->
  <van-action-bar>
    <van-action-bar-icon icon="chat-o" text="客服" dot />
    <van-action-bar-icon icon="cart-o" text="购物车" badge="5" @click="handleToCart" />
    <van-action-bar-icon icon="shop-o" text="店铺" badge="12" />
    <van-action-bar-button type="warning" text="加入购物车" @click="addCart" />
    <van-action-bar-button type="danger" text="立即购买" />
  </van-action-bar>
</template>

<script setup>
// -------------------------------- 导入模块 --------------------------------
// 导入 vue3 的 API
import { ref, reactive, toRefs, computed } from 'vue'

// 导入 vue-router 的 API
// onBeforeRouteUpdate：路由守卫
import { onBeforeRouteUpdate, useRouter } from 'vue-router'

// 导入商品请求接口
// 1、getProductDetails：获取商品详情
import { getProductDetails } from '@/api/product_api'
// 导入购物车请求接口
// 1、addToCart：获取商品详情
import { addToCart } from '@/api/cart_api'

// 导入 pinia 实例
import { useUserStore } from '@/store_pinia' // 用户数据状态管理

// 导入自己封装的功能函数
import judgeRequest from '@/utils/judge_request' // 判断请求状态

// 导入 vant 组件，按需引入
import {
  Toast,
  NavBar as VanNavBar,
  Tabs as VanTabs,
  Tab as VanTab,
  Swipe as VanSwipe,
  SwipeItem as VanSwipeItem,
  Image as VanImage,
  CellGroup as VanCellGroup,
  Cell as VanCell,
  Icon as VanIcon,
  Popup as VanPopup,
  Stepper as VanStepper,
  Grid as VanGrid,
  GridItem as VanGridItem,
  ActionBar as VanActionBar,
  ActionBarIcon as VanActionBarIcon,
  ActionBarButton as VanActionBarButton
} from 'vant'

// 导入组件
import CommentItem from '@/components/CommentItem.vue' // 评论列表组件

// -------------------------------- 声明数据 --------------------------------
// 接收父组件传递的数据
const props = defineProps({
  productId: {
    type: String,
    required: true
  }
})

const { productId } = toRefs(props) // 获取商品 id
const productDetails = ref({}) // 商品详情
const userStore = useUserStore() // 实例化用户状态容器
const router = useRouter() // 实例化路由对象
// 1、商品区域数据
const storeInfo = computed(() => productDetails.value.storeInfo) // 整个商品区域数据
const sliderImage = computed(() => storeInfo.value?.slider_image) // 轮播图数据
// 弹出层展示数据
const specState = reactive({
  show: false, // 控制弹出层显示隐藏
  spec: [], // 选中的规格
  count: 1 // 购买的商品数量
})
const productAttr = computed(() => productDetails.value?.productAttr) // 商品规格
const productValue = computed(() => productDetails.value?.productValue) // 不同商品规格组合成不同的数据
const sku = computed(() => specState.spec.toString()) // 规格数据处理（将选择的商品规格进行拼接）
const specDetail = computed(() => productValue.value?.[sku.value]) // 根据组合的商品规格 sku，找到对应规格的商品信息
// 2、评论区域数据
// 2.1 用户评论数
const replyCount = computed(() => productDetails.value?.replyCount || 0)
const replyInfo = computed(() => `用户评价（${replyCount.value}）`)
// 2.2 好评率
const replyChance = computed(() => productDetails.value?.replyChance || '100') // 好评率
const replyRate = computed(() => `好评率：${replyChance.value}%`) // 好评率
// 2.3 好评信息
const reply = computed(() => productDetails.value?.reply) // 要展示的一条评论信息
// 4、推荐区域数据
const goodList = computed(() => productDetails.value?.good_list) // 推荐商品数据

// -------------------------------- 函数封装 ---------------------------------
// 返回按钮事件
const onClickLift = () => history.back()

// 点击规格选框，展示弹出层的方法
const showPopup = () => {
  specState.show = true // 显示弹出层
}

// 封装获取商品详情函数
const initProductDetails = async (productId) => {
  const data = await getProductDetails(productId) // 发送请求
  const result = judgeRequest(data.status, '商品详情获取失败！', '商品不存在！') // 判断请求结果

  // 请求成功
  if (result) {
    productDetails.value = data.data // 获取商品信息
  }

  // 调用初始化商品规格数据
  initSpec(data.data.productAttr)
}

// 初始化默认选中的规格数据
const initSpec = (spec) => {
  // 初始化选中的规格，默认选中每个规格的第一项
  specState.spec = spec.map(item => item.attr_value[0].attr)
}

// 点击规格进行规格选择的切换
const handleTagChange = (value, index) => {
  specState.spec[index] = value
}

// 通过导航守卫监听路由变化，并跳转到对应商品的路由页面，并请求新数据
onBeforeRouteUpdate((to) => {
  // 清除旧数据
  productDetails.value = {}
  // 回到页面顶部
  document.body.scrollTop = 0
  document.documentElement.scrollTop = 0
  // 根据最新商品 id，请求新的商品数据
  initProductDetails(to.params.productId)
})

// 点击加入购物车按钮，跳转到购物车页面
const addCart = async () => {
  // 判断用户是否登录
  if (!userStore.user) {
    // 如果用户未登录，跳转到登录页面
    return router.push({
      name: 'login',
      query: {
        redirect: router.currentRoute.value.fullPath
      }
    })
  }

  // 判断商品规格弹出层的显示隐藏
  if (!specState.show) {
    // 如果规格的弹出层没有显示，就让其弹出，然后选择商品规格
    specState.show = true
    return
  }
  // 发送请求，将商品加入购物车
  const data = await addToCart({
    new: 0, // 0 表示加入购物车，1 表示立即购买
    productId: productId.value, // 商品 id
    uniqueId: specDetail.value.unique, // 商品规格 id
    cartNum: specState.count // 商品数量
  })

  const result = judgeRequest(data.status, '商品详情获取失败！') // 判断请求结果

  // 如果请求成功
  if (result) {
    // 关闭规格弹出层
    specState.show = false
    // 提示框
    return Toast('商品加入购物车成功！')
  }
}

// 点击购物车按钮，跳转到购物车页面
const handleToCart = () => {
  // 跳转购物车页面
  router.push('/cart')
}

// -------------------------------- 函数调用 ---------------------------------
initProductDetails(productId.value) // 调用请求商品数据函数
</script>

<style lang="scss" scoped>
// 为了避免页面样式问题，需要将导航栏的 fixed 样式加一个权重
.van-nav-bar {
  width: 100%;
}

// 标签页区域整体
.van-tabs {
  margin-bottom: 50px;

  // 顶部标签页导航
  :deep(.van-tabs__wrap) {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 46px;
    overflow: hidden;
  }

  // 底部主题内容容器样式
  :deep(.van-tabs__content) {
    padding-top: 46px;

    // 每个小区域
    .van-tab__panel {
      background-color: #f2f2f2;

      // 一、商品区域
      &:nth-child(1) {
        // 信息区域
        .product_info {
          margin-bottom: 10px;

          .van-cell {
            padding-bottom: 0 !important;
          }

          // 商品头部信息区域
          .header_info {
            // 价格区域
            .price {
              display: flex;
              justify-content: space-between;

              span {
                font-size: 24px;
                font-weight: bold;

                &:nth-child(1) {
                  color: #ee0a24;
                }
              }
            }

            // 标题区域
            .title {
              // 超过两行信息显示省略号
              display: -webkit-box;
              -webkit-line-clamp: 2;
              overflow: hidden;
              -webkit-box-orient: vertical;
              margin: 5px 0 10px;
              font-size: 16px;
              font-weight: bold;
            }
          }

          // 商品其他信息区域
          .other_info {
            padding-top: 0 !important;

            .message {
              display: flex;
              justify-content: space-between;
              align-items: center;
            }
          }
        }

        // 商品弹出层选框区域
        .van-popup {
          max-height: 70%;
          margin-bottom: 50px;

          // 头部商品信息
          .popuo-header {
            .van-cell__value {
              display: flex;
              align-items: center;

              img {
                width: 75px;
                height: 75px;
              }

              .info {
                padding: 10px;

                h3 {
                  // 超过一行显示省略号
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  overflow: hidden;
                  -webkit-line-clamp: 1;
                }

                .price {
                  color: #F2270C;
                  font-size: 16px;
                  font-weight: bold;
                }

                .stock {
                  color: #999999;
                  font-size: 12px;
                }
              }
            }
          }

          // 中部商品规格
          .spec {
            p {
              margin: 5px 0;
            }

            .tag {
              display: inline-block;
              min-width: 20px;
              margin-right: 5px;
              padding: 0 12px;
              background-color: #f2f2f2;
              border: 1px solid #cccccc;
              border-radius: 20px;
              text-align: center;
            }

            .active {
              background-color: #FCEDEB;
              border-color: #F2270C;
              color: #F2270C;
            }
          }
        }
      }

      // 二、评论区域
      &:nth-child(2) {
        padding-top: 10px;
      }

      // 三、详情区域
      &:nth-child(3) {
        padding-top: 10px;

        .description {
          width: 100%;

          p {
            font-size: 20px;
          }

          img {
            width: 100%;
          }
        }
      }

      // 四、推荐区域
      &:nth-child(4) {
        padding-top: 10px;

        h2 {
          margin-bottom: 10px;
        }

        // 推荐商品宫格容器
        .van-grid-item__content  {
          padding: 0;

          // 推荐商品标题
          p {
            padding: 0 3px;
            font-size: 14px;
            font-weight: bold;
            // 超过两个设置省略号
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            -webkit-line-clamp: 2;
          }

          // 推荐商品价格
          span {
            color: #F2270C;
            font-size: 12px;
            font-weight: bold;
          }
        }
      }
    }
  }
}

// 底部购物区域
.van-action-bar {
  width: 100%;
  z-index: 2222;
}
</style>
